Custom Views তৈরি করা

Custom Views তৈরি করা

Android এ Custom Views তৈরি করে, আপনি আপনার অ্যাপ্লিকেশনে অনন্য এবং কাস্টমাইজড UI এলিমেন্ট তৈরি করতে পারেন, যা সাধারণ Material Components দিয়ে সম্ভব নয়। Custom Views ব্যবহার করে আপনি সম্পূর্ণ কাস্টমাইজড গ্রাফিক্স, অ্যানিমেশন, এবং UI উপাদান ডিজাইন করতে পারেন। নিচে Custom Views তৈরি করার ধাপে ধাপে আলোচনা এবং উদাহরণ দেওয়া হলো।

১. Custom View তৈরি করার ধাপসমূহ

Custom View তৈরি করতে কয়েকটি ধাপ অনুসরণ করতে হয়:

• View বা ViewGroup ক্লাসটি এক্সটেন্ড (extend) করা।
• onDraw() মেথড ওভাররাইড করে কাস্টম গ্রাফিক্স অঙ্কন করা।
• Custom Attributes ব্যবহার করে View কে আরও কাস্টমাইজযোগ্য করা।
• Measure মেথড ব্যবহার করে View এর সঠিক মাপ নির্ধারণ করা।

২. Simple Custom View তৈরি করা

নিচে একটি সিম্পল Custom View তৈরি করা হয়েছে, যা একটি বৃত্ত আঁকে।

CustomCircleView.kt (Kotlin)

package com.example.customviews

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

class CustomCircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // বৃত্তের কেন্দ্র এবং রেডিয়াস নির্ধারণ
        val radius = minOf(width, height) / 2f
        val cx = width / 2f
        val cy = height / 2f
        canvas.drawCircle(cx, cy, radius, paint)
    }
}

XML Layout এ Custom View ব্যবহার করা

<com.example.customviews.CustomCircleView
    android:layout_width="150dp"
    android:layout_height="150dp" />

এই উদাহরণে, CustomCircleView ক্লাসটি View এক্সটেন্ড করেছে এবং onDraw() মেথডে একটি নীল বৃত্ত অঙ্কন করেছে।

৩. Custom Attributes যোগ করা

Custom Attributes যোগ করে আপনি আপনার Custom View কে আরও কাস্টমাইজযোগ্য করতে পারেন। XML এ কাস্টম অ্যাট্রিবিউট ডিফাইন করা এবং View তে এগুলো প্রসেস করা হয়।

ধাপ ১: attrs.xml এ কাস্টম অ্যাট্রিবিউট ডিফাইন করা

<declare-styleable name="CustomCircleView">
    <attr name="circleColor" format="color" />
    <attr name="circleRadius" format="dimension" />
</declare-styleable>

ধাপ ২: Custom View এ কাস্টম অ্যাট্রিবিউট প্রসেস করা

class CustomCircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var circleColor = Color.BLUE
    private var circleRadius = 50f

    init {
        context.theme.obtainStyledAttributes(attrs, R.styleable.CustomCircleView, 0, 0).apply {
            try {
                circleColor = getColor(R.styleable.CustomCircleView_circleColor, Color.BLUE)
                circleRadius = getDimension(R.styleable.CustomCircleView_circleRadius, 50f)
            } finally {
                recycle()
            }
        }
    }

    private val paint = Paint().apply {
        color = circleColor
        style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val cx = width / 2f
        val cy = height / 2f
        canvas.drawCircle(cx, cy, circleRadius, paint)
    }
}

ধাপ ৩: XML Layout এ Custom Attributes ব্যবহার করা

<com.example.customviews.CustomCircleView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:circleColor="@android:color/holo_red_dark"
    app:circleRadius="80dp" />

এখানে, circleColor এবং circleRadius অ্যাট্রিবিউট ব্যবহার করে View কে XML থেকে কাস্টমাইজ করা হয়েছে। context.theme.obtainStyledAttributes() ব্যবহার করে অ্যাট্রিবিউট সংগ্রহ করা হয়েছে এবং View এ প্রয়োগ করা হয়েছে।

৪. Custom Measure মেথড ব্যবহার করা

Custom View এর সঠিক মাপ নির্ধারণের জন্য, onMeasure() মেথড ওভাররাইড করা প্রয়োজন হতে পারে। এটি View কে কাস্টম মাপ সেট করতে এবং রিসাইজ করতে সহায়তা করে।

উদাহরণ: Custom Measure মেথড ব্যবহার করা

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val desiredWidth = 200
    val desiredHeight = 200

    val widthMode = MeasureSpec.getMode(widthMeasureSpec)
    val heightMode = MeasureSpec.getMode(heightMeasureSpec)
    val widthSize = MeasureSpec.getSize(widthMeasureSpec)
    val heightSize = MeasureSpec.getSize(heightMeasureSpec)

    val width = when (widthMode) {
        MeasureSpec.EXACTLY -> widthSize
        MeasureSpec.AT_MOST -> minOf(desiredWidth, widthSize)
        MeasureSpec.UNSPECIFIED -> desiredWidth
        else -> desiredWidth
    }

    val height = when (heightMode) {
        MeasureSpec.EXACTLY -> heightSize
        MeasureSpec.AT_MOST -> minOf(desiredHeight, heightSize)
        MeasureSpec.UNSPECIFIED -> desiredHeight
        else -> desiredHeight
    }

    setMeasuredDimension(width, height)
}

onMeasure() মেথডে View এর চাহিদা অনুযায়ী প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে। MeasureSpec ব্যবহার করে, আপনি View এর লেআউট পরিমাপ ম্যানেজ করতে পারেন।

৫. Custom ViewGroup তৈরি করা

কিছু ক্ষেত্রে, একটি কাস্টম লেআউট বা ViewGroup তৈরি করা প্রয়োজন হতে পারে, যা একাধিক Child View কে কাস্টমাইজড ম্যানেজমেন্ট প্রদান করে।

উদাহরণ: Custom ViewGroup তৈরি করা

class CustomLinearLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ViewGroup(context, attrs, defStyleAttr) {

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        var topOffset = 0
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            child.layout(l, topOffset, r, topOffset + child.measuredHeight)
            topOffset += child.measuredHeight
        }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var totalHeight = 0
        var maxWidth = 0

        for (i in 0 until childCount) {
            val child = getChildAt(i)
            measureChild(child, widthMeasureSpec, heightMeasureSpec)
            totalHeight += child.measuredHeight
            maxWidth = maxOf(maxWidth, child.measuredWidth)
        }

        setMeasuredDimension(
            resolveSize(maxWidth, widthMeasureSpec),
            resolveSize(totalHeight, heightMeasureSpec)
        )
    }
}

এই উদাহরণে, CustomLinearLayout একটি কাস্টম লিনিয়ার লেআউট তৈরি করেছে, যা Child View গুলিকে উল্লম্বভাবে সাজিয়েছে।

৬. Custom View তে এনিমেশন যোগ করা

Custom View তে এনিমেশন যোগ করে UI কে আরও ইন্টারেক্টিভ করা যায়।

উদাহরণ: Custom View এ এনিমেশন যোগ করা

fun animateCircle() {
    val animator = ValueAnimator.ofFloat(0f, 360f)
    animator.addUpdateListener { animation ->
        rotation = animation.animatedValue as Float
        invalidate()
    }
    animator.duration = 1000
    animator.start()
}

এই উদাহরণে, একটি এনিমেটেড রোটেশন তৈরি করা হয়েছে, যা Custom View তে এনিমেশন যোগ করে।

উপসংহার

Custom Views তৈরি করে, আপনি আপনার অ্যাপ্লিকেশনে সম্পূর্ণ কাস্টমাইজড UI এলিমেন্ট যোগ করতে পারেন, যা সাধারণ Material Components বা বিদ্যমান Views দিয়ে সম্ভব নয়। Custom Attributes, Measure মেথড, এবং এনিমেশন ব্যবহার করে, আপনি আপনার View কে সম্পূর্ণ কাস্টমাইজ করতে এবং একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে সক্ষম হবেন।